<template>
	<div id="app">
		<h1>子组件中传递来的数据：{{info}}</h1>
		<hr>
		<!-- 通过 props 实现子组件给父组件传递数据 -->
		<Student :receiveName="receiveName"></Student>
		<hr>
		
		<!-- 通过自定义事件实现子组件给父组件传递数据  方式一 -->
		<!-- 子组件上触发 sendName 事件,就会回调父组件中的 receiveName 方法 -->
		<!-- 如果想要该事件只触发一次，通过once属性实现 -->
		<!-- <School v-on:sendName.once="receiveName"></School> -->
		<School v-on:sendName="receiveName"></School>
		<hr>
		<!-- 通过自定义事件实现子组件给父组件传递数据 方式二-->
		<!-- 通过ref属性给该子组件设置一个标识 -->
		<Teacher ref="t1"></Teacher>
		
		<!-- 给组件绑定原生事件 -->
		<Teacher @click.native="showMsg"></Teacher>
	</div>
</template>

<script>
	import School from "./components/School.vue";
	import Student from "./components/Student.vue";
	import Teacher from "./components/Teacher.vue";

	export default {
		name: 'App',
		components: {
			School,
			Student,
			Teacher
		},
		data() {
			return {
				info: ''
			}
		},
		methods: {
			// 如果要接收多个参数
			// 第一个参数使用指定的变量接收，其他的参数通过 ...params 接收到 params数组中
			receiveName(value,...params) {
				this.info = value;
				console.log(params)
			},
			showMsg() {
				alert('Hello!');
			}
		},
		// 挂在完成后 执行
		mounted() {
			// 给子组件绑定自定义事件
			// 第一个参数是在子组件中触发的事件
			// 第二个参数是在父组件中执行的回调函数
			this.$refs.t1.$on('sendName', this.receiveName);
			
			// 二个参数，回调函数可以直接在此处，但是要写成箭头函数，
			// 否则 this 对象表示的是子组件vc实例对象，而不是当前父组件的vc实例对象
			// this.$refs.t1.$on('sendName', (value) => this.info = value);
			
			// 如果想要该自定义事件只触发一次，通过以下方式
			// this.$refs.t1.$once('sendName', this.receiveName);
		}
	}
</script>

<style>
</style>